<template>
  <Modal :show="showModal">
    <div class="wallet-kit-modal-content">
      <!--      title      -->
      <ModalHeader
        :uid="ScanModalConstant?.CONTEXT_UID"
        :stack-frame="currentStackFrame"
        @back="backStack"
        @close="close"
      />
      <div
        v-if="wallet.getQrCodeUri && wallet.isWalletKitConnector && wallet.ready && !wallet.installed"
        style="height: 100%"
      >
        <DownloadContent
          v-if="currentStackFrame === 0"
          style="margin-top: 16px"
          :wallet="wallet"
          @get="
            () => {
              toStack(1, {
                title: 'Get ' + wallet.name
              })
            }
          "
          @open="openOfficialWalletConnectModal"
        />
        <div v-else-if="currentStackFrame === 1" style="height: 100%">
          <DownloadOptions
            :wallet="wallet"
            style="padding-top: 16px; margin-top: 0"
            @add-to-browser="addToBrowser"
            @add-to-desktop="addToDesktop"
            @add-to-mobile="addToMobile"
          />
        </div>
        <InstructionOptions
          v-else-if="currentStackFrame === 2"
          :uid="ScanModalConstant?.CONTEXT_UID"
          :stack-frame="currentStackFrame"
          style="margin-top: 16px"
          :wallet="wallet"
          @learn-more="learnMore(wallet.extension?.instructions?.learnMoreUrl)"
          @continue="addAppContinue(wallet)"
          @connect="connect(wallet)"
          @refresh="refresh"
        />
        <!--  只有移动端添加app会走到这里  -->
        <InstructionMobileContent
          v-else-if="currentStackFrame === 3"
          :wallet="wallet"
          style="padding-top: 16px"
          @connect="connect(wallet)"
          @learn-more="learnMore(wallet.qrCode?.instructions?.learnMoreUrl)"
        />
      </div>
      <div v-else style="height: 100%">
        <div v-if="currentStackFrame === 0" style="height: 100%">
          <DownloadOptions
            :wallet="wallet"
            style="padding-top: 16px; margin-top: 0"
            @add-to-browser="addToBrowser"
            @add-to-desktop="addToDesktop"
            @add-to-mobile="addToMobile"
          />
        </div>
        <InstructionOptions
          v-else-if="currentStackFrame === 1"
          style="margin-top: 16px"
          :uid="ScanModalConstant?.CONTEXT_UID"
          :stack-frame="currentStackFrame"
          :wallet="wallet"
          @learn-more="learnMore(wallet.extension?.instructions?.learnMoreUrl)"
          @continue="addAppContinue(wallet)"
          @connect="connect(wallet)"
          @refresh="refresh"
        />
        <!--  只有移动端添加app会走到这里  -->
        <InstructionMobileContent
          v-else-if="currentStackFrame === 2"
          :wallet="wallet"
          style="padding-top: 16px"
          @connect="connect(wallet)"
          @learn-more="learnMore(wallet.qrCode?.instructions?.learnMoreUrl)"
        />
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
  import Modal from './index.vue'
  import { useModalContext } from '../../hooks/useModalContext'
  import { ScanModalConstant } from '../../constants/ModalContextConstant'
  import ModalHeader from '../Modal/ModalHeader.vue'
  import type { WalletConnector } from '../../wallets/useWalletConnectors'
  import DownloadContent from '../Modal/DownloadContent.vue'
  import InstructionOptions from '../Modal/InstructionOptions.vue'
  import InstructionMobileContent from '../Modal/InstructionMobileContent.vue'
  import DownloadOptions from '../Modal/DownloadOptions.vue'
  import { useModal } from '../../hooks/useModal'

  const props = withDefaults(
    defineProps<{
      wallet: WalletConnector
    }>(),
    {}
  )

  const emits = defineEmits(['open', 'close'])

  const { currentStackFrame, toStack, backStack } = useModalContext({
    uid: ScanModalConstant?.CONTEXT_UID
  })
  const {
    state: showModal,
    close,
    open
  } = useModal({
    onOpen() {
      goInitStack(props.wallet)
      emits('open')
    },
    onClose() {
      toStack(0, {
        title: '',
        haveBackIcon: false
      })
      emits('close')
    }
  })

  const learnMore = (url?: string) => {
    if (url) {
      window.open(url, '_blank')
      return
    }
    window.open('https://learn.rainbow.me/understanding-web3?utm_source=rainbowkit&utm_campaign=learnmore', '_blank')
  }

  const addToBrowser = (wallet: WalletConnector) => {
    if (wallet.extension?.instructions) {
      window.open(wallet.extensionDownloadUrl, '_blank')
      toStack(currentStackFrame.value + 1, {
        title: 'Get started with ' + wallet.name,
        type: 'browser'
      })
    } else {
      goInitStack(wallet)
      if (wallet.ready) {
        wallet.connect()
      }
    }
  }
  const addToMobile = (wallet: WalletConnector) => {
    toStack(currentStackFrame.value + 1, {
      title: 'Install ' + wallet.name,
      type: 'mobile'
    })
  }
  const addToDesktop = (wallet: WalletConnector) => {
    if (wallet.desktop?.instructions) {
      window.open(wallet.desktopDownloadUrl, '_blank')
      toStack(currentStackFrame.value + 1, {
        title: 'Get started with ' + wallet.name,
        type: 'desktop'
      })
    } else {
      goInitStack(wallet)
      if (wallet.ready) {
        wallet.connect()
      }
    }
  }

  const addAppContinue = (wallet: WalletConnector) => {
    if (wallet.qrCode?.instructions) {
      toStack(currentStackFrame.value + 1, {
        title: 'Get started with ' + wallet.name
      })
    } else {
      goInitStack(wallet)
      if (wallet.ready) {
        wallet.connect()
      }
    }
  }

  const connect = (wallet: WalletConnector) => {
    if (wallet.id === 'coinbase') {
      goInitStack(wallet)
      if (wallet.ready) {
        wallet.connect()
      }
    } else {
      goInitStack(wallet)
    }
  }

  const goInitStack = (wallet: WalletConnector) => {
    if (!wallet.ready) {
      toStack(0, {
        title: 'Get ' + wallet.name
      })
    } else {
      if (wallet.getQrCodeUri && wallet.isWalletKitConnector && wallet.id !== 'coinbase') {
        toStack(0, {
          title: 'Scan with ' + wallet.name
        })
      } else {
        toStack(0, {
          title: ''
        })
      }
    }
  }

  const refresh = () => {
    window.location.reload()
  }

  const openOfficialWalletConnectModal = () => {
    if (props.wallet && props.wallet.showWalletConnectModal) {
      props.wallet.showWalletConnectModal()
      close()
    }
  }

  defineExpose({
    showModal,
    open,
    close
  })
</script>

<style lang="scss" scoped>
  .wallet-kit-modal-content {
    width: 425px;
    display: flex;
    flex-direction: column;
    height: 506px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
    background: #1a1b1f;
    border-radius: 4px;
    color: #f2f2f2;
  }
</style>
